<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 300px;
				height: 300px;
				background-color: green;
				transition:all 1s;
				/* 后面两个运动曲线 和延迟出发时间是可以省略的 */
				/* 如果想要写多个属性的改变，用相同的写法，中间用逗号隔开 */
				/* transition: width 1s,height 1s; */
				/* 没给背景颜色添加动画但是还是会变，因为有:hover */
				/* 默认的ease就比较好 */
			}
			
			div:hover {
				width: 500px;
				height: 500px;
				background-color: hotpink;
			}
		</style>
	</head>
	<body>
		<h2>过渡动画是从一个状态慢慢过渡到另一个状态，可以让页面更加动感，更加好看</h2>
		<h2>transition:要过渡的属性 花费时间 运动曲线 何时开始</h2>
		<h2>动画过渡效果一般都是配合:hover来实现</h2>
		<h2>谁需要做过渡就给谁加transition属性</h2>
		<ul>
			<li>属性:想要变化的css属性，宽高，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了</li>
			<li>花费时间:单位是 秒(必须写单位) 比如0.5s</li>
			<li>运动曲线:默认是ease(可以省略)</li>
			<li>运动曲线有五种:linear匀速  ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速再减速 </li>
			<li>何时开始:单位是 秒(必须写单位) 可以设置延迟触发时间 默认是0s (可以省略)</li>			
		</ul>
		<div></div>
	</body>
</html>
